<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资产上链管理系统</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            danger: '#F87272',
            warning: '#FBBD23',
            info: '#3ABFF8',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .btn-hover {
        @apply transform transition-all duration-300 hover:scale-105;
      }
      .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-md sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-cubes text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold text-primary">资产上链管理系统</h1>
      </div>
      <div class="flex items-center space-x-4">
        <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
          <i class="fa fa-moon-o text-gray-600"></i>
        </button>
        <button class="hidden md:flex items-center space-x-2 bg-primary text-white px-4 py-2 rounded-lg btn-hover">
          <i class="fa fa-question-circle"></i>
          <span>帮助</span>
        </button>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 状态卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-xl p-6 card-shadow border-l-4 border-primary">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">总资产</p>
            <h3 id="total-assets" class="text-3xl font-bold mt-1">0</h3>
          </div>
          <div class="bg-primary/10 p-3 rounded-lg">
            <i class="fa fa-database text-primary text-xl"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 0%
          </span>
          <span class="text-gray-500 ml-2">相比昨日</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow border-l-4 border-secondary">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">活跃资产</p>
            <h3 id="active-assets" class="text-3xl font-bold mt-1">0</h3>
          </div>
          <div class="bg-secondary/10 p-3 rounded-lg">
            <i class="fa fa-check-circle text-secondary text-xl"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 0%
          </span>
          <span class="text-gray-500 ml-2">相比昨日</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow border-l-4 border-warning">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">今日新增</p>
            <h3 id="new-assets-today" class="text-3xl font-bold mt-1">0</h3>
          </div>
          <div class="bg-warning/10 p-3 rounded-lg">
            <i class="fa fa-plus-circle text-warning text-xl"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 0%
          </span>
          <span class="text-gray-500 ml-2">相比昨日</span>
        </div>
      </div>
      
      <div class="bg-white rounded-xl p-6 card-shadow border-l-4 border-info">
        <div class="flex justify-between items-start">
          <div>
            <p class="text-gray-500 text-sm font-medium">资产转移</p>
            <h3 id="asset-transfers" class="text-3xl font-bold mt-1">0</h3>
          </div>
          <div class="bg-info/10 p-3 rounded-lg">
            <i class="fa fa-exchange text-info text-xl"></i>
          </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 0%
          </span>
          <span class="text-gray-500 ml-2">相比昨日</span>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="bg-white rounded-xl p-6 card-shadow mb-8">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold">资产统计</h2>
        <div class="flex space-x-2">
          <button class="chart-period-btn bg-primary text-white px-3 py-1 rounded-md text-sm" data-period="week">本周</button>
          <button class="chart-period-btn bg-gray-100 text-gray-600 px-3 py-1 rounded-md text-sm" data-period="month">本月</button>
          <button class="chart-period-btn bg-gray-100 text-gray-600 px-3 py-1 rounded-md text-sm" data-period="year">全年</button>
        </div>
      </div>
      <div class="h-64">
        <canvas id="assetChart"></canvas>
      </div>
    </div>
    
    <!-- 操作区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 左侧：资产列表 -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl p-6 card-shadow mb-6">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold">资产列表</h2>
            <div class="relative">
              <input type="text" id="search-asset" placeholder="搜索资产ID或名称..." 
                class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg input-focus w-full md:w-64">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
          
          <div class="overflow-x-auto">
            <table class="min-w-full">
              <thead>
                <tr class="bg-gray-50">
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">名称</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所有者</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">信息</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody id="assets-table-body" class="bg-white divide-y divide-gray-200">
                <!-- 资产数据将通过JavaScript动态填充 -->
                <tr class="text-center">
                  <td colspan="5" class="px-6 py-12 text-gray-500">
                    <div class="flex flex-col items-center">
                      <i class="fa fa-inbox text-4xl mb-4 text-gray-300"></i>
                      <p>暂无资产数据</p>
                      <button id="refresh-assets" class="mt-3 text-primary flex items-center space-x-1 hover:underline">
                        <i class="fa fa-refresh"></i>
                        <span>刷新</span>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="mt-4 flex justify-between items-center">
            <div class="text-sm text-gray-500">
              显示 <span id="assets-showing">0</span> 条记录
            </div>
            <div class="flex space-x-1">
              <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-50">上一页</button>
              <button class="px-3 py-1 bg-primary text-white rounded-md">1</button>
              <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-50">下一页</button>
            </div>
          </div>
        </div>
        
        <!-- 操作日志区域（新增） -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <h2 class="text-xl font-bold mb-6">最近资产创建记录</h2>
          <div class="overflow-x-auto">
            <table class="min-w-full">
              <thead>
                <tr class="bg-gray-50">
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资产ID</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所有者</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资产名称</th>
                </tr>
              </thead>
              <tbody id="operation-logs-body">
                <!-- 日志数据将通过JavaScript动态填充 -->
                <tr class="text-center">
                  <td colspan="4" class="px-6 py-12 text-gray-500">
                    <p>暂无创建记录</p>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <!-- 右侧：操作表单 -->
      <div class="lg:col-span-1">
        <!-- 标签页切换 -->
        <div class="flex border-b border-gray-200 mb-6">
          <button class="tab-btn px-4 py-2 text-primary font-medium border-b-2 border-primary" data-tab="create">创建资产</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-gray-700 font-medium" data-tab="transfer">转移资产</button>
          <button class="tab-btn px-4 py-2 text-gray-500 hover:text-gray-700 font-medium" data-tab="query">查询资产</button>
        </div>
        
        <!-- 表单区域 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
          <!-- 创建资产表单 -->
          <div id="create-tab" class="tab-content">
            <h3 class="text-lg font-semibold mb-4">创建新资产</h3>
            <form id="create-asset-form">
              <div class="mb-4">
                <label for="create-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
                <input type="text" id="create-id" name="id" required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus">
              </div>
              <div class="mb-4">
                <label for="create-owner" class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
                <input type="text" id="create-owner" name="owner" required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus">
              </div>
              <div class="mb-4">
                <label for="create-name" class="block text-sm font-medium text-gray-700 mb-1">资产名称</label>
                <input type="text" id="create-name" name="name" required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus">
              </div>
              <div class="mb-6">
                <label for="create-info" class="block text-sm font-medium text-gray-700 mb-1">资产信息</label>
                <textarea id="create-info" name="info" rows="3"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus"></textarea>
              </div>
              <button type="submit" 
                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors btn-hover">
                <i class="fa fa-plus-circle mr-2"></i>创建资产
              </button>
            </form>
          </div>
          
          <!-- 转移资产表单 -->
          <div id="transfer-tab" class="tab-content hidden">
            <h3 class="text-lg font-semibold mb-4">转移资产</h3>
            <form id="transfer-asset-form">
              <div class="mb-4">
                <label for="transfer-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
                <input type="text" id="transfer-id" name="id" required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus">
              </div>
              <div class="mb-6">
                <label for="transfer-owner" class="block text-sm font-medium text-gray-700 mb-1">新所有者</label>
                <input type="text" id="transfer-owner" name="owner" required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus">
              </div>
              <button type="submit" 
                class="w-full bg-warning hover:bg-warning/90 text-white font-medium py-2 px-4 rounded-lg transition-colors btn-hover">
                <i class="fa fa-exchange mr-2"></i>转移资产
              </button>
            </form>
          </div>
          
          <!-- 查询资产表单 -->
          <div id="query-tab" class="tab-content hidden">
            <h3 class="text-lg font-semibold mb-4">查询资产</h3>
            <form id="query-asset-form">
              <div class="mb-4">
                <label for="query-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
                <input type="text" id="query-id" name="id" required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg input-focus">
              </div>
              <button type="submit" 
                class="w-full bg-info hover:bg-info/90 text-white font-medium py-2 px-4 rounded-lg transition-colors btn-hover">
                <i class="fa fa-search mr-2"></i>查询资产
              </button>
            </form>
            
            <!-- 查询结果 -->
            <div id="query-result" class="mt-6 p-4 border border-gray-200 rounded-lg hidden">
              <h4 class="font-medium mb-3">查询结果</h4>
              <div class="space-y-2">
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500">ID:</span>
                  <span id="result-id" class="font-medium"></span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500">名称:</span>
                  <span id="result-name" class="font-medium"></span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500">所有者:</span>
                  <span id="result-owner" class="font-medium"></span>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm text-gray-500">信息:</span>
                  <span id="result-info" class="font-medium"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-cubes text-primary text-2xl"></i>
            <h2 class="text-xl font-bold">资产上链管理系统</h2>
          </div>
          <p class="text-gray-400">
            基于区块链技术的资产数字化管理平台，安全、透明、不可篡改。
          </p>
        </div>
        
        <div>
          <h3 class="text-lg font-semibold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">资产列表</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">创建资产</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">资产转移</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-lg font-semibold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-center space-x-2">
              <i class="fa fa-envelope-o text-primary"></i>
              <a href="mailto:support@example.com" class="text-gray-400 hover:text-primary transition-colors">support@example.com</a>
            </li>
            <li class="flex items-center space-x-2">
              <i class="fa fa-phone text-primary"></i>
              <span class="text-gray-400">+86 123 4567 8901</span>
            </li>
            <li class="flex items-center space-x-2">
              <i class="fa fa-map-marker text-primary"></i>
              <span class="text-gray-400">北京市海淀区科技园</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400 text-sm">
        <p>© 2025 资产上链管理系统 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 通知组件 -->
  <div id="notification" class="fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-500 z-50 max-w-xs">
    <div class="flex items-start">
      <div id="notification-icon" class="mr-3 text-xl"></div>
      <div>
        <h4 id="notification-title" class="font-medium"></h4>
        <p id="notification-message" class="text-sm mt-1"></p>
      </div>
      <button id="close-notification" class="ml-4 text-gray-400 hover:text-gray-600">
        <i class="fa fa-times"></i>
      </button>
    </div>
  </div>

  <!-- 加载遮罩 -->
  <div id="loading-overlay" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white p-6 rounded-lg flex flex-col items-center">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      <p class="mt-4 text-gray-600" id="loading-message">处理中...</p>
    </div>
  </div>

  <script>
    // 模拟API数据
    const API_BASE_URL = 'http://localhost:3000/api';
    
    // 模拟操作日志（新增）
    let operationLogs = []; // 存储所有操作记录（包括资产创建）
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', () => {
      // DOM元素
      const tabs = document.querySelectorAll('.tab-btn');
      const tabContents = document.querySelectorAll('.tab-content');
      const chartPeriodBtns = document.querySelectorAll('.chart-period-btn');
      const createAssetForm = document.getElementById('create-asset-form');
      const transferAssetForm = document.getElementById('transfer-asset-form');
      const queryAssetForm = document.getElementById('query-asset-form');
      const assetsTableBody = document.getElementById('assets-table-body');
      const assetsShowing = document.getElementById('assets-showing');
      const queryResult = document.getElementById('query-result');
      const notification = document.getElementById('notification');
      const closeNotification = document.getElementById('close-notification');
      const loadingOverlay = document.getElementById('loading-overlay');
      const loadingMessage = document.getElementById('loading-message');
      const themeToggle = document.getElementById('theme-toggle');
      const refreshAssetsBtn = document.getElementById('refresh-assets');
      
      // 图表初始化
      let assetChart;
      
      // 初始化标签页
      tabs.forEach(tab => {
        tab.addEventListener('click', () => {
          // 移除所有标签的活跃状态
          tabs.forEach(t => {
            t.classList.remove('text-primary', 'border-primary', 'border-b-2');
            t.classList.add('text-gray-500', 'hover:text-gray-700');
          });
          
          // 添加当前标签的活跃状态
          tab.classList.remove('text-gray-500', 'hover:text-gray-700');
          tab.classList.add('text-primary', 'border-primary', 'border-b-2');
          
          // 隐藏所有内容
          tabContents.forEach(content => {
            content.classList.add('hidden');
          });
          
          // 显示当前内容
          const tabId = tab.getAttribute('data-tab');
          document.getElementById(`${tabId}-tab`).classList.remove('hidden');
          
          // 如果是查询标签，隐藏结果
          if (tabId === 'query') {
            queryResult.classList.add('hidden');
          }
        });
      });
      
      // 初始化图表
      function initChart() {
        const ctx = document.getElementById('assetChart').getContext('2d');
        
        // 模拟数据
        const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        const data = {
          labels: labels,
          datasets: [{
            label: '新增资产',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: 'rgba(22, 93, 255, 0.2)',
            borderColor: 'rgba(22, 93, 255, 1)',
            borderWidth: 2,
            tension: 0.4,
            fill: true
          }, {
            label: '资产转移',
            data: [28, 48, 40, 19, 36, 27, 30],
            backgroundColor: 'rgba(54, 211, 153, 0.2)',
            borderColor: 'rgba(54, 211, 153, 1)',
            borderWidth: 2,
            tension: 0.4,
            fill: true
          }]
        };
        
        assetChart = new Chart(ctx, {
          type: 'line',
          data: data,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                position: 'top',
              },
              tooltip: {
                mode: 'index',
                intersect: false,
              }
            },
            scales: {
              y: {
                beginAtZero: true,
                grid: {
                  drawBorder: false
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });
      }
      
      // 更新图表数据
      function updateChartData(period) {
        let labels, newAssets, transfers;
        
        if (period === 'week') {
          labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
          newAssets = [65, 59, 80, 81, 56, 55, 40];
          transfers = [28, 48, 40, 19, 36, 27, 30];
        } else if (period === 'month') {
          labels = ['第1周', '第2周', '第3周', '第4周'];
          newAssets = [280, 250, 320, 290];
          transfers = [120, 140, 110, 130];
        } else {
          labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
          newAssets = [1200, 1900, 3000, 5000, 4000, 6000, 7000, 5000, 6000, 8000, 9000, 10000];
          transfers = [300, 400, 450, 700, 600, 800, 900, 700, 800, 1100, 1200, 1300];
        }
        
        assetChart.data.labels = labels;
        assetChart.data.datasets[0].data = newAssets;
        assetChart.data.datasets[1].data = transfers;
        assetChart.update();
      }
      
      // 初始化表单提交
      function initFormSubmits() {
        // 创建资产表单
        createAssetForm.addEventListener('submit', async (e) => {
          e.preventDefault();
          
          const formData = new FormData(createAssetForm);
          const assetData = {
            id: formData.get('id'),
            owner: formData.get('owner'),
            name: formData.get('name'),
            info: formData.get('info'),
            timestamp: new Date().toLocaleString() // 新增创建时间
          };
          
          showLoading('正在创建资产...');
          
          try {
            // 模拟API调用
            await simulateApiCall(1500);
            
            // **新增：向日志数组添加创建记录**
            operationLogs.unshift({ // unshift 确保最新记录在数组顶部
              type: 'create', // 操作类型
              ...assetData // 资产信息
            });
            
            showNotification('成功', '资产创建成功！', 'success');
            fetchAssets();
            renderOperationLogs(); // 新增：刷新日志
            createAssetForm.reset();
          } catch (error) {
            showNotification('错误', error.message, 'error');
          } finally {
            hideLoading();
          }
        });
        
        // 转移资产表单
        transferAssetForm.addEventListener('submit', async (e) => {
          e.preventDefault();
          
          const formData = new FormData(transferAssetForm);
          const transferData = {
            id: formData.get('id'),
            owner: formData.get('owner')
          };
          
          showLoading('正在转移资产...');
          
          try {
            // 模拟API调用
            await simulateApiCall(1500);
            
            showNotification('成功', '资产转移成功！', 'success');
            fetchAssets();
            transferAssetForm.reset();
          } catch (error) {
            showNotification('错误', error.message, 'error');
          } finally {
            hideLoading();
          }
        });
        
        // 查询资产表单
        queryAssetForm.addEventListener('submit', async (e) => {
          e.preventDefault();
          
          const assetId = document.getElementById('query-id').value;
          
          showLoading('正在查询资产...');
          
          try {
            // 模拟API调用
            await simulateApiCall(1000);
            
            // 模拟查询结果
            const asset = {
              id: assetId,
              name: `资产名称-${assetId}`,
              owner: `所有者-${Math.floor(Math.random() * 1000)}`,
              info: `这是关于资产${assetId}的详细信息。该资产创建于2025年，目前状态良好。`
            };
            
            // 填充查询结果
            document.getElementById('result-id').textContent = asset.id;
            document.getElementById('result-name').textContent = asset.name;
            document.getElementById('result-owner').textContent = asset.owner;
            document.getElementById('result-info').textContent = asset.info;
            
            queryResult.classList.remove('hidden');
            showNotification('成功', '资产查询成功！', 'success');
          } catch (error) {
            showNotification('错误', error.message, 'error');
            queryResult.classList.add('hidden');
          } finally {
            hideLoading();
          }
        });
      }
      
      // 获取资产列表
      async function fetchAssets() {
        showLoading('正在加载资产数据...');
        
        try {
          // 模拟API调用
          await simulateApiCall(1000);
          
          // 模拟资产数据
          const assets = [];
          for (let i = 1; i <= 10; i++) {
            assets.push({
              id: `ASSET-${i.toString().padStart(4, '0')}`,
              name: `资产名称-${i}`,
              owner: `所有者-${Math.floor(Math.random() * 1000)}`,
              info: `这是关于资产${i}的详细信息。该资产创建于2025年，目前状态良好。`
            });
          }
          
          // 渲染资产表格
          renderAssetsTable(assets);
          assetsShowing.textContent = assets.length;
          
          showNotification('成功', '资产数据加载成功！', 'success');
        } catch (error) {
          showNotification('错误', error.message, 'error');
        } finally {
          hideLoading();
        }
      }
      
      // 渲染资产表格
      function renderAssetsTable(assets) {
        if (assets.length === 0) {
          assetsTableBody.innerHTML = `
            <tr class="text-center">
              <td colspan="5" class="px-6 py-12 text-gray-500">
                <div class="flex flex-col items-center">
                  <i class="fa fa-inbox text-4xl mb-4 text-gray-300"></i>
                  <p>暂无资产数据</p>
                  <button id="refresh-assets" class="mt-3 text-primary flex items-center space-x-1 hover:underline">
                    <i class="fa fa-refresh"></i>
                    <span>刷新</span>
                  </button>
                </div>
              </td>
            </tr>
          `;
          return;
        }
        
        let tableHtml = '';
        
        assets.forEach(asset => {
          tableHtml += `
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">${asset.id}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">${asset.name}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm text-gray-900">${asset.owner}</div>
              </td>
              <td class="px-6 py-4">
                <div class="text-sm text-gray-900 truncate max-w-xs">${asset.info}</div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                <button class="text-primary hover:text-primary/80 mr-3" onclick="window.fillTransferForm('${asset.id}', '${asset.owner}')">
                  <i class="fa fa-exchange mr-1"></i>转移
                </button>
                <button class="text-info hover:text-info/80" onclick="window.fillQueryForm('${asset.id}')">
                  <i class="fa fa-search mr-1"></i>查看
                </button>
              </td>
            </tr>
          `;
        });
        
        assetsTableBody.innerHTML = tableHtml;
      }
      
      // 渲染操作日志（新增）
      function renderOperationLogs() {
        const logsBody = document.getElementById('operation-logs-body');
        const createLogs = operationLogs.filter(log => log.type === 'create'); // 只筛选创建类型的日志
        
        if (createLogs.length === 0) {
          logsBody.innerHTML = `
            <tr class="text-center">
              <td colspan="4" class="px-6 py-12 text-gray-500">
                <p>暂无创建记录</p>
              </td>
            </tr>
          `;
          return;
        }
        
        let logHtml = '';
        createLogs.forEach(log => {
          logHtml += `
            <tr class="hover:bg-gray-50 transition-colors">
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                ${log.timestamp}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                ${log.id}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm">
                ${log.owner}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm truncate max-w-xs">
                ${log.name}
              </td>
            </tr>
          `;
        });
        
        logsBody.innerHTML = logHtml;
      }
      
      // 填充转移表单
      function fillTransferForm(id, currentOwner) {
        // 切换到转移标签页
        tabs.forEach(tab => {
          if (tab.getAttribute('data-tab') === 'transfer') {
            tab.click();
          }
        });
        
        // 填充表单
        document.getElementById('transfer-id').value = id;
        document.getElementById('transfer-owner').focus();
        
        // 显示提示
        showNotification('提示', `当前所有者: ${currentOwner}`, 'info');
      }
      
      // 填充查询表单
      function fillQueryForm(id) {
        // 切换到查询标签页
        tabs.forEach(tab => {
          if (tab.getAttribute('data-tab') === 'query') {
            tab.click();
          }
        });
        
        // 填充表单
        document.getElementById('query-id').value = id;
        
        // 自动提交查询
        setTimeout(() => {
          queryAssetForm.dispatchEvent(new Event('submit'));
        }, 100);
      }
      
      // 显示通知
      function showNotification(title, message, type) {
        const notificationTitle = document.getElementById('notification-title');
        const notificationMessage = document.getElementById('notification-message');
        const notificationIcon = document.getElementById('notification-icon');
        
        notificationTitle.textContent = title;
        notificationMessage.textContent = message;
        
        // 设置通知类型样式
        if (type === 'success') {
          notification.className = 'fixed bottom-4 right-4 p-4 rounded-lg shadow-lg bg-green-50 border-l-4 border-green-400 transform transition-all duration-500 z-50 max-w-xs';
          notificationIcon.className = 'fa fa-check-circle text-green-500 mr-3 text-xl';
        } else if (type === 'error') {
          notification.className = 'fixed bottom-4 right-4 p-4 rounded-lg shadow-lg bg-red-50 border-l-4 border-red-400 transform transition-all duration-500 z-50 max-w-xs';
          notificationIcon.className = 'fa fa-times-circle text-red-500 mr-3 text-xl';
        } else if (type === 'info') {
          notification.className = 'fixed bottom-4 right-4 p-4 rounded-lg shadow-lg bg-blue-50 border-l-4 border-blue-400 transform transition-all duration-500 z-50 max-w-xs';
          notificationIcon.className = 'fa fa-info-circle text-blue-500 mr-3 text-xl';
        } else if (type === 'warning') {
          notification.className = 'fixed bottom-4 right-4 p-4 rounded-lg shadow-lg bg-yellow-50 border-l-4 border-yellow-400 transform transition-all duration-500 z-50 max-w-xs';
          notificationIcon.className = 'fa fa-exclamation-circle text-yellow-500 mr-3 text-xl';
        }
        
        // 显示通知
        setTimeout(() => {
          notification.classList.remove('translate-y-20', 'opacity-0');
        }, 10);
        
        // 自动关闭
        setTimeout(() => {
          hideNotification();
        }, 5000);
      }
      
      // 隐藏通知
      function hideNotification() {
        notification.classList.add('translate-y-20', 'opacity-0');
      }
      
      // 显示加载遮罩
      function showLoading(message) {
        loadingMessage.textContent = message || '处理中...';
        loadingOverlay.classList.remove('hidden');
      }
      
      // 隐藏加载遮罩
      function hideLoading() {
        loadingOverlay.classList.add('hidden');
      }
      
      // 切换主题
      function toggleTheme() {
        const icon = themeToggle.querySelector('i');
        
        if (icon.classList.contains('fa-moon-o')) {
          icon.classList.remove('fa-moon-o');
          icon.classList.add('fa-sun-o');
          document.body.classList.add('dark-mode');
          showNotification('提示', '深色模式已启用', 'info');
        } else {
          icon.classList.remove('fa-sun-o');
          icon.classList.add('fa-moon-o');
          document.body.classList.remove('dark-mode');
          showNotification('提示', '浅色模式已启用', 'info');
        }
      }
      
      // 更新仪表盘统计数据
      function updateDashboardStats() {
        document.getElementById('total-assets').textContent = '1,284';
        document.getElementById('active-assets').textContent = '1,024';
        document.getElementById('new-assets-today').textContent = '24';
        document.getElementById('asset-transfers').textContent = '16';
      }
      
      // 模拟API调用
      function simulateApiCall(delay) {
        return new Promise(resolve => setTimeout(resolve, delay));
      }
      
      // 初始化图表周期切换
      chartPeriodBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          chartPeriodBtns.forEach(b => {
            b.classList.remove('bg-primary', 'text-white');
            b.classList.add('bg-gray-100', 'text-gray-600');
          });
          
          btn.classList.remove('bg-gray-100', 'text-gray-600');
          btn.classList.add('bg-primary', 'text-white');
          
          const period = btn.getAttribute('data-period');
          updateChartData(period);
        });
      });
      
      // 初始化通知关闭按钮
      closeNotification.addEventListener('click', () => {
        hideNotification();
      });
      
      // 初始化主题切换
      themeToggle.addEventListener('click', toggleTheme);
      
      // 初始化刷新按钮
      refreshAssetsBtn.addEventListener('click', fetchAssets);
      
      // 初始加载资产数据
      fetchAssets();
      renderOperationLogs(); // 新增：初始化日志
      
      // 设置模拟数据
      setTimeout(() => {
        updateDashboardStats();
      }, 1000);
      
      // 初始化图表
      initChart();
      
      // 初始化表单提交
      initFormSubmits();
      
      // 全局暴露函数
      window.fillTransferForm = fillTransferForm;
      window.fillQueryForm = fillQueryForm;
    });
  </script>
</body>
</html>